<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>用户中心</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: owl carousel  -->
    <link href="/plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="/plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
    <script src="/plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)"/>
    <link href="/css/footerAdjust.css" rel="stylesheet"/>

    <style>
        .orderLabel {
            width: 350px;
            border: solid;
            border-bottom-color: transparent;
            border-left-color: white;
            border-right-color: white;
            border-top-color: white;
            border-width: 10px;
            background-color: #ffe084;
        }
        .myNavBtn>.btn:hover{
            background-color: #ffc107;
            border-color: #ffc107;
        }
    </style>
    <script type="text/javascript">
        function ToPage() {
            if(isNaN($(".ToPage").val()))
                return;
            window.location.href='/userCenter/myOrders?page='+$('.ToPage').val()
        }
    </script>
</head>
<body>
<div th:replace="fragment::header"></div>



    <section class="main-content section-main bg padding-y-sm">
        <div class="container">
            <div class="row row-sm">
                <aside class="col-md-2" style="text-align: center">
                    <br>
                    <h5 class="text-uppercase">个人中心</h5>
                    <ul class="menu-category">
                        <li><a href="/userCenter"><i class="fa fa-book"></i> 个人信息 </a></li>
                        <li><a href="/userCenter/RecAddress"><i class="fa fa-truck"></i> 收货信息 </a></li>
                        <li><a href="/userCenter/myOrders?page=1" style="color: #ffc107"><i class="fa fa-file-text"></i> 我的订单 </a>
                        </li>
                        <li><a href="#"><i class="fa fa-user"></i> 会员中心 </a></li>
                        <li><a href="#"><i class="fa fa-heart"></i> 收藏商品 </a></li>
                        <li><a href="#"><i class="fa fa-thumbs-up"></i> 为您推荐 </a></li>

                    </ul>

                </aside>
                <div class="card col-md-10">
                    <div class="card-body">
                        <div class="h6" th:if="${tOrderList.size()==0}">
                            您还没有下过单哦，快去商城里逛逛吧！
                        </div>
                        <table class="table">
                            <tr th:each="tOrder,comStat:${tOrderList}">
                                <td th:style="${comStat.index==0}?'border-top:0px;':''">
                                    <div class="orderLabel" style="display: inline-block;">
                                        <div style="margin-top: 10px;">
                                            <label style="margin-bottom: 0px;">&nbsp;&nbsp;下单日期:</label> <label
                                                style="float: right;margin-right: 10px;margin-bottom: 0px;"
                                                th:text="${tOrder.orderPlaceTime}">2018-08-08</label>
                                        </div>
                                    </div>
                                    <span th:if="${tOrder.orderStatus=='placed'}" style="background-color: #ffaeae"
                                          class="badge badge-warning">等待付款</span>
                                    <span th:if="${tOrder.orderStatus=='unpaid'}" style="background-color: #ffaeae"
                                          class="badge badge-warning">等待付款</span>
                                    <span th:if="${tOrder.orderStatus=='paid'}" class="badge badge-success">等待发货</span>
                                    <span th:if="${tOrder.orderStatus=='shipping'}" class="badge badge-secondary">已发货</span>
                                    <table class="table shopping-cart-wrap" style="background-color: whitesmoke;">
                                        <thead class="text-muted">
                                        <tr>
                                            <th scope="col">商品</th>
                                            <th scope="col" width="120">数量</th>
                                            <th scope="col" width="120">总价</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="tOrderCommodity,comStat:${tOrder.tCommodityList}"
                                            th:unless="${comStat.index>1}">
                                            <td>
                                                <figure class="media">
                                                    <div class="img-wrap"><img th:src="${tOrderCommodity.commHeadImage}"
                                                                               class="img-thumbnail img-sm">
                                                    </div>
                                                    <figcaption class="media-body">
                                                        <h6 style="white-space: normal" class="title text-truncate"
                                                            th:text="${tOrderCommodity.commName}">Product name goes
                                                            here </h6>
                                                        <dl class="dlist-inline small">
                                                            <dt>型号：</dt>
                                                            <dd th:text="${tOrderCommodity.commVersion}">XXL</dd>
                                                        </dl>
                                                    </figcaption>
                                                </figure>
                                            </td>
                                            <td>
                                                <span class="h5" th:text="${tOrderCommodity.commQuantity}">1</span>
                                            </td>
                                            <td>
                                                <div class="price-wrap">
                                                    <var class="price"
                                                         th:text="'￥'+${#numbers.formatDecimal(tOrderCommodity.commTotalPrice,0,2)}">USD
                                                        145</var>
                                                    <small class="text-muted"
                                                           th:text="'单价：￥'+${#numbers.formatDecimal(tOrderCommodity.commPrice,0,2)}">
                                                        (USD5 each)
                                                    </small>
                                                </div> <!-- price-wrap .// -->
                                            </td>
                                        </tr>
                                        <tr th:if="${tOrder.tCommodityList.size()>2}">
                                            <td>
                                            <span class="text-muted"
                                                  th:text="|还有${tOrder.tCommodityList.size()-2}件商品被隐藏...|">还有1件商品被隐藏...</span>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 18px;">订单总价：<label class="price"
                                                                                     th:text="'￥'+${#numbers.formatDecimal(tOrder.orderTotalPrice,0,2)}">￥
                                                8888</label></td>
                                            <td></td>
                                            <td>
                                                <a style="margin-top: 15px;" th:href="'/order/' + ${tOrder.orderUid}"
                                                   class="btn btn-outline-warning"> 查看订单详情 </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                            <div style="margin:0 auto;">
                                <div class="btn-group mr-2 myNavBtn" role="group" aria-label="First group">
                                    <a th:if="${nowPage>1}" th:href="|/userCenter/myOrders?page=1|" class="btn btn-light"><i class="fa fa-angle-double-left"></i></a>

                                    <a th:if="${(pageCount-nowPage)<1&&(nowPage-4)>0}" th:href="|/userCenter/myOrders?page=${nowPage-4}|" class="btn btn-light" th:text="${nowPage-4}">1</a>
                                    <a th:if="${(pageCount-nowPage)<2&&(nowPage-3)>0}" th:href="|/userCenter/myOrders?page=${nowPage-3}|" class="btn btn-light" th:text="${nowPage-3}">2</a>

                                    <a th:if="${(nowPage-2)>0}" th:href="|/userCenter/myOrders?page=${nowPage-2}|" class="btn btn-light" th:text="${nowPage-2}">1</a>
                                    <a th:if="${(nowPage-1)>0}" th:href="|/userCenter/myOrders?page=${nowPage-1}|" class="btn btn-light" th:text="${nowPage-1}">2</a>

                                    <a href="/" class="btn btn-warning disabled" style="opacity: 1" th:text="${nowPage}">3</a>

                                    <a th:if="${(nowPage+1)<=pageCount}" th:href="|/userCenter/myOrders?page=${nowPage+1}|" class="btn btn-light" th:text="${nowPage+1}">4</a>
                                    <a th:if="${(nowPage+2)<=pageCount}" th:href="|/userCenter/myOrders?page=${nowPage+2}|" class="btn btn-light" th:text="${nowPage+2}">5</a>

                                    <a th:if="${nowPage<3&&(nowPage+3)<=pageCount}" th:href="|/userCenter/myOrders?page=${nowPage+3}|" class="btn btn-light" th:text="${nowPage+3}">4</a>
                                    <a th:if="${nowPage<2&&(nowPage+4)<=pageCount}" th:href="|/userCenter/myOrders?page=${nowPage+4}|" class="btn btn-light" th:text="${nowPage+4}">5</a>

                                    <a th:if="${nowPage<pageCount}" th:href="|/userCenter/myOrders?page=${pageCount}|" class="btn btn-light"><i class="fa fa-angle-double-right"></i></a>
                                </div>
                                <div style="margin-left: 20px" class="btn-group mr-2" role="group" aria-label="Second group">
                                    <input style="width:44px" type="text" class="form-control ToPage" th:placeholder="${nowPage}" aria-label="Recipient's username" aria-describedby="button-addon2">
                                    <div style="margin-left: 10px" class="input-group-append myNavBtn">
                                        <button onclick="ToPage()" class="btn btn-light" type="button" id="button-addon2">跳转</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- card-body .// -->
                </div> <!-- card.// -->
            </div> <!-- row.// -->
        </div> <!-- container .//  -->
    </section>



<div th:replace="fragment::footer"></div>
</body>
</html>